import { useState } from 'react'
import { createGlobalStyle } from 'styled-components'
import { GlobalStyle, Tab, TabItem } from './style'
// styled-components   styled 定义一段样式 
// createGlobalStyle 定义全局样式
// 并以组件的形式返回

// import obj, { GlobalStyle } from './style' // style.js   js css 后缀可以省略
// { } 从export普通输出解构 不是 export default解构

// 组件化思想 不以html的思维去看待，页面的一个功能块 作为一个组件看待
// 这个页面分成了几个部分 section

console.log(GlobalStyle);

function App() {

  return (
    <div className="App">
      <GlobalStyle></GlobalStyle>
      <Tab>
        <a className='selected'>
          <TabItem>
            <span>推荐</span>
          </TabItem>
        </a>
        <a>
          <TabItem>
            <span>歌手</span>
          </TabItem>
        </a>
        <a>
          <TabItem>
            <span>排行榜</span>
          </TabItem>
        </a>
      </Tab>
    </div>
  )
}

export default App
